<template>
        <ul>
            <li v-for="(item,index) in result" :key="index" :class="{bgWhite:index==liIndex,bgRed:index!=liIndex}">
				<a href="javascript:;" @click="redic(index)" :class="{colorRed:index==liIndex,colorWhite:index!=liIndex}">{{item.media_name}}</a>
			</li>
        </ul>
</template>
<script>
export default {
  data() {
    return {
    variable: ["shortVideo", "redBook", "kola", "wechat"],
	  liIndex: 0,
	  result:""
    };
  },
  methods: {
    redic(index) {
      this.$emit("showShortVideo", this.variable[index],this.result[index].id);
      this.liIndex = index;
    }
  },
  mounted() {
    this.$ajax.post(
      this.Ipurl + "advertisingInformation/getNamesByType" + "?type=SEM"
    ).then(res=>{
    this.result = res.data.dataInfo
	});
  }
};
</script>

<style scoped>
ul {
  overflow: hidden;
}
ul li {
  float: left;
  width: 25%;
  height: 38px;
  text-align: center;
  line-height: 38px;
  background-color: #ee4041;
}
ul li a {
  font-size: 16px;
}
.colorRed {
  color: #ee4041;
}
.colorWhite {
  color: #fff;
}
.bgWhite {
  background: #fff;
}
.bgRed {
  background: #ee4041;
}
</style>